#body {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: 'Calibri', 'Microsoft Yahei', Arial, Helvetica, sans-serif;
  background: #000;
}

.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.hide {
  display: none !important;
}

.sink {
  z-index: 998 !important;
}

.btn {
  cursor: pointer;
  font-weight: 700;
  width: 299px;
  height: 64px;
  font-size: 30px;
  font-weight: 700;
  line-height: 64px;
  background: url(../images/btn.png);
  display: block;
  color: inherit;
  &.ios {
    margin: 0 auto;
    .icon {
      width: 31px;
      height: 100%;
      background: url(../images/i_ios.png) 0 (64-42)/2 + px no-repeat;
    }
  }
  &.android {
    margin: 9px auto 0 auto;
    .icon {
      width: 33px;
      height: 100%;
      background: url(../images/i_and.png) 0 (64-39)/2 + px no-repeat;
    }
  }
  &.gold {
    background: url(../images/btn_.png);
    background-size: 100% 100%;
    margin: 9px auto 0 auto;
    color: #83781c;
    text-align: center;
  }
  &.ed {
    background: url(../images/btn_get.png);
    background-size: 100% 100%;
    margin: 9px auto 0 auto;
    color: #ebebe7;
    text-align: center;
  }
  .icon {
    float: left;
    margin-left: 41px;
  }
  .os-txt {
    float: left;
    text-align: center;
    width: 204px;
    height: 100%;
    line-height: 64px;
  }
}

.wrap {
  min-width: 1000px;
  overflow: hidden;
  .content {
    width: 100%;
    height: 4413px;
    position: relative;
    .center {
      background: #cde3fd;
      position: absolute;
      height: 4413px;
      width: 1920px;
      top: 0;
      left: 50%;
      margin-left: -960px;
    }
    .header {
      width: 1920px;
      height: 1108px;
      position: absolute;
      top: 0;
      background: url(../images/header.jpg) center 0 no-repeat;
      .logo {
        cursor: pointer;
        position: absolute;
        width: 304px;
        height: 187px;
        background: url(../images/logo.png);
        top: 25px;
        left: 50%;
        margin-left: 304*-.5 + px;
      }
      .interactive {
        margin-top: 635px;
        .logged {
          margin: 36px auto 0 auto;
          color: #000;
          text-align: center;
          font-size: 26px;
          .item {
            display: inline-block;
            margin: 0 10px;
            &.logout {
              cursor: pointer;
            }
          }
        }
      }
    }
    .title {
      width: 1136px;
      height: 73px;
      background: url(../images/title.png);
      background-size: 100% 100%;
      font-size: 40px;
      text-align: center;
      line-height: 70px;
      top: 0;
      position: absolute;
      left: 50%;
      margin-left: 1136*-.5 + px;
    }
    .desc {
      font-size: 18px;
      color: #3079c5;
      width: 60%;
      text-align: center;
      margin: 82px auto 0 auto;
      line-height: 24px;
      .red {
        color: #fa2d34;
      }
    }
    .sub-title {
      font-size: 30px;
      color: #3079c5;
      font-weight: 700;
      width: 40%;
      margin: 30px auto 0 auto;
      text-align: center;
    }
    .sub-content {
      font-size: 24px;
      color: #3079c5;
      width: 58%;
      line-height: 36px;
      margin: 18px auto 0 auto;
    }
    .event1 {
      width: 100%;
      height: 834px;
      float: left;
      margin-top: 1124px;
      position: relative;
      .list {
        position: absolute;
        left: 50%;
        margin-left: (248*4 + 49*3) * -.5 + px;
        top: 150px;
        .item {
          float: left;
          margin-left: 49px;
          width: 248px;
          height: 248px;
          position: relative;
          &:nth-child(1) {
            margin-left: 0;
          }
          &:nth-child(4) {
            background: url(../images/e1_3.jpg);
          }
          .item-desc {
            font-size: 18px;
            position: absolute;
            bottom: 22px;
            height: 42px;
            .cell {
              width: (250-88) + px;
              height: 46px;
              padding-left: 88*.5 + px;
            }
          }
        }
      }
      .btn {
        margin-top: 330px;
      }
    }
    .event2 {
      width: 100%;
      height: 1044px;
      float: left;
      position: relative;
      .line {
        font-size: 30px;
        color: #2c99ec;
        width: 662px;
        margin: 36px auto 0 auto;
        .item {
          cursor: pointer;
          float: left; // text-decoration: underline;
          border-bottom: 3px solid;
          font-weight: 700;
        }
        .gap {
          cursor: default;
          width: 15px;
          height: 31px;
          background: #2c99ec;
          margin: 6px 50px 0 50px;
        }
      }
      .timebar {
        position: absolute;
        left: 50%;
        margin-left: (380*3+2)*-.5 + px;
        top: 296px;
        .item {
          cursor: pointer;
          position: relative;
          width: 380px;
          height: 69px;
          background: #29a3ff;
          float: left;
          border-right: 1px solid #72bffa;
          &:last-child {
            border: 0;
          }
          &.gray {
            color: #a9daff
          }
          .icon {
            width: 34px;
            height: 34px;
            background: url(../images/icon.jpg);
            position: absolute;
            top: (69-34)*.5 + px;
            &.left {
              left: 10px;
            }
            &.right {
              right: 10px;
            }
          }
          .box {
            font-size: 20px;
            position: absolute;
            height: 69px;
            top: 0%;
            left: (380 - (380-(34+10)*2-20))*.5 + px;
            width: (380-(34+10)*2-20) + px;
            .cell {
              width: (380-(34+10)*2-20) + px;
              height: 69px;
            }
          }
        }
      }
      .pokemons {
        position: absolute;
        top: 372px;
        width: 100%;
        height: 300px;
        .list {
          height: 482px;
          width: (219+10)*5 + px;
          position: absolute;
          left: 50%;
          margin-left: ((219+10)*5+10)*-.5 + px;
          .item {
            width: 219px;
            float: left;
            margin: 45px 0 0 10px;
            .pokemon-avatar {
              cursor: pointer;
              width: 100%;
              height: 184px;
              position: relative;
              .poke-l {
                width: 223px;
                height: 186px;
                background: url(../images/poke-l.png);
                background-size: 100% 100%;
                position: absolute;
                top: -2px;
                left: -2px;
              }
              .poke-g {
                width: 223px;
                height: 186px;
                background: url(../images/poke-g.png);
                position: absolute;
                top: -2px;
                left: -2px;
              }
              .poke-c {
                width: 64px;
                height: 50px;
                background: url(../images/poke-c.png);
                position: absolute;
                left: 73px;
                top: -34px;
                .icon {
                  width: 12px;
                  height: 12px;
                  background: url(../images/star.png);
                  position: absolute;
                  &.left {
                    left: -39px;
                    top: 29px;
                  }
                  &.right {
                    left: 80px;
                    top: 36px;
                  }
                }
              }
            }
            .pokemon-name {
              width: 202px;
              height: 15px;
              margin: 8px auto 0 auto;
              background: url(../images/pokemon-name.png);
              text-align: center;
              font-size: 22px;
              color: #3079c5;
              line-height: 8px;
              &.short {
                background: url(../images/pokemon-name2.png);
              }
            }
          }
        }
      }
      .btn {
        margin-top: 540px;
      }
    }
    .event3 {
      width: 100%;
      float: left;
      position: relative;
      .list {
        top: 133px;
        position: absolute;
        width: (374+8)*3 + px;
        height: 849px;
        left: 50%;
        margin-left: ((374+8)*3+8)*-.5 + px;
        .card {
          position: relative;
          float: left;
          margin: 50px 0 0 8px;
          width: 374px;
          height: 240px;
          background: url(../images/card.jpg);
          .pri {
            width: 344px;
            height: 159px;
            position: absolute;
            left: 17px;
            top: 19px;
          }
          .btn {
            width: 232px;
            height: 62px;
            position: absolute;
            left: 50%;
            margin-left: 232*-.5 + px;
            bottom: -26px;
          }
          &:last-child {
            margin-left: (8+8+374) + px;
          }
        }
      }
    }
  }
  .loader {
    &.aside-left {
      width: 355px;
      height: 3305px;
      background: url(../images/page_bg_left.jpg);
      position: absolute;
      left: 0;
      top: 1108px;
    }
    &.aside-right {
      width: 356px;
      height: 3305px;
      background: url(../images/page_bg_right.jpg);
      position: absolute;
      right: 0;
      top: 1108px;
    }
    &.aside-bottom {
      width: 1213px;
      height: 156px;
      background: url(../images/page_bg_bottom.jpg);
      position: absolute;
      left: 353px;
      bottom: 0;
    }
    &.widget1 {
      width: 156px;
      height: 147px;
      background: url(../images/widget1.jpg);
      position: absolute;
      left: 1324px;
      top: 1815px;
    }
    &.widget2 {
      width: 298px;
      height: 310px;
      background: url(../images/widget2.jpg);
      position: absolute;
      left: 353px;
      top: 3949px;
    }
    &.widget3 {
      width: 127px;
      height: 463px;
      background: url(../images/widget3.jpg);
      position: absolute;
      left: 1439px;
      top: 3796px;
    }
    &.widget4 {
      width: 32px;
      height: 62px;
      background: url(../images/mouse.png);
      position: absolute;
      top: 870px;
      left: 50%;
      margin-left: -16px;
      animation: donghua1 1.25s infinite ease-in-out;
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 999;
}

.pop {
  overflow: hidden;
  padding: 30px 0 25px 0;
  background: #cde3fd;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  border: 5px solid #ffe400;
  border-radius: 15px;
  &.ctn {
    width: 1136px;
    font-size: 22px;
    color: #2c9aec;
    text-align: center;
    .ctn {
      width: 90%;
      margin-left: 5%;
    }
  }
  &.login {
    width: 560px;
    font-size: 28px;
    color: #2c9aec;
    .login {
      .inputs {
        .item {
          float: left;
          margin-top: 15px;
          .txt {
            width: 220px;
            float: left;
            line-height: 38px;
            text-align: right;
            margin-right: 8px;
          }
          .input {
            padding: 0 8px;
            color: #2c9aec;
            font-size: 22px;
            float: left;
            outline: none;
            border: 1px solid #2c9aec;
            width: 237px;
            height: 38px;
            line-height: 38px;
          }
        }
      }
      .btn {
        width: 247px;
        height: 54px;
        float: left;
        margin: 30px 0 10px 21px;
        line-height: 54px;
        font-size: 22px;
        &.fb {
          background: url(../images/_btn.png);
          background-size: 100% 100%;
        }
      }
    }
  }
  &.server {
    padding: 35px 0;
    width: 560px;
    font-size: 28px;
    color: #2c9aec;
    text-align: center;
    .box {
      .item {
        position: relative;
        float: left;
        width: 100%;
        padding: 0;
        margin: 20px 0 0 0;
        &:last-child {
          margin-top: 8px;
        }
        .tip {
          font-size: 18px;
          line-height: 38px;
          position: absolute;
          bottom: 0;
          left: 394px;
          margin-left: 12px;
          line-height: 40px;
        }
        .gold {
          margin-top: 11px;
          width: 250px;
          height: 50px;
          line-height: 50px;
          position: relative;
          font-size: 24px;
        }
      }
    }
    select {
      padding: 0 8px;
      color: #2c9aec;
      font-size: 21px;
      outline: none;
      border: 1px solid #2c9aec;
      width: 250px;
      height: 38px;
      text-align: center;
      line-height: 38px;
    }
  }
  &.overview {
    width: 1216px;
    font-size: 24px;
    color: #2c9aec;
    text-align: center;
    .jlq {
      display: none;
    }
    .overview {
      .title {
        margin: 20px 0;
      }
      .item {
        float: left;
        width: 402px;
        height: 214px;
        .img {
          width: 376px;
          height: 116px;
          margin: 30px 0 0 16px;
        }
        &:nth-child(2) {
          border-left: 1px solid #80c0f5;
          border-right: 1px solid #80c0f5;
        }
      }
    }
  }
  .close {
    cursor: pointer;
    width: 68px;
    height: 61px;
    background: url(../images/close.png);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
  .jlq {
    width: 325px;
    height: 279px;
    position: absolute;
    background: url(../images/pop.jpg);
    bottom: 0;
    right: 0;
    z-index: -1;
  }
  .x {
    cursor: pointer;
    width: 68px;
    height: 61px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .dashed {
    border-radius: 8px;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px dashed #adccef;
    z-index: -1;
  }
  .dashed2 {
    border-radius: 8px;
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px dashed #fff;
    z-index: -1;
  }
  .ctn {
    position: relative;
  }
}

.nav-index {
  position: fixed;
  right: 12px;
  top: 50%;
  width: 58px;
  margin: -200px 0 0 0;
  .item {
    background: #000;
    position: relative;
    cursor: pointer;
    transition: transform .75s;
    float: left;
    width: 58px;
    height: 58px;
    background: url(../images/cir.png) no-repeat;
    background-repeat: 100% 100%;
    margin-top: 10px;
    line-height: 58px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    &.hover {
      width: 230px;
      transform: translateX(-160px);
      background: url(../images/bar.png) no-repeat;
      background-repeat: 100% 100%;
    }
    .num,
    .txt {
      float: left;
    }
    .num {
      width: 58px;
      height: 58px;
    }
    .txt {
      width: (230-58) + px;
      height: 58px;
      font-size: 18px;
      font-weight: normal;
      .cell {
        width: (230-58) + px;
        height: 58px;
        line-height: 22px;
      }
    }
    transform: translateX(0);
    .hover {
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
}

@keyframes donghua1 {
  0% {
    transform: translateY(0)
  }
  80% {
    transform: translateY(10px)
  }
  100% {
    transform: translateY(0)
  }
}